<template>
  <div>
    <div class="top">
        <div class="top_left">
          <span class="textA">直流电源</span>/<span class="textB">拓扑展示</span>
        </div>
        <div class="top_right">
          <div class="box_A">A路</div>
          <div class="box_B">B路</div>
        </div>
    </div>
    <div id="scroll-container" style="position: relative;">
      <div class="bottom" ref="stageContainer"></div>
    </div>
  </div>
  

</template>
<script>
  import Konva from 'konva';
  import {getPowerinfor} from "@/api/index"
  export default {
    data() {
      return {
        isDragging: false, // 用于标记是否正在拖动
        lastPointerPos: null, // 记录上一次鼠标指针的位置
        Alist:{},
        Blist:{},
        // Alist:{id:11,state:"开启",branch:[
        //   {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 2, deviceId: "001-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"故障",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 3, deviceId: "001-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 4, deviceId: "001-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 5, deviceId: "001-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",}
        // ]},
        // Blist:{id:22,state:"开启",branch:[
        //   {id: 8, deviceId: "002-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:111,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 9, deviceId: "002-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:112,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 10, deviceId: "002-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:113,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 11, deviceId: "002-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:114,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 12, deviceId: "002-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:115,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 8, deviceId: "002-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 9, deviceId: "002-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 10, deviceId: "002-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 11, deviceId: "002-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
        //   {id: 12, deviceId: "002-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",}
        // ]},
        scaleAgroup:0,
        halfHeightA:0,    //半高
        halfHeightB:0,    //半高
     mData:   {
      "A": {
        "id": 1,
        "deviceId": "001",
        "deviceName": "汇聚",
        "deviceType": "汇聚",
        "location": "柜体编号",
        "network": "A路",
        "level": 1,
        "hwVersion": "1.1",
        "swVersion": "1.2",
        "status": "状态",
        "temperature": "60",
        "humidity": "30",
        "sd": "烟感",
        "fromDeviceId": "0",
        "uploadTime": "2025-01-21 14:06:14",
        "uid": "1",
        "isEnd": "1",
        "componentUrl": "52236b33-fe36-45bf-9bef-91c759494e19.png",
        "branch": [
            {
                "id": 1,
                "deviceId": "001-1",
                "deviceName": "汇聚分支1",
                "deviceType": "汇聚分支",
                "location": "机房",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "在线",
                "temperature": "78",
                "humidity": "19",
                "sd": "烟感",
                "fromDeviceId": "001",
                "deviceInfoId": 1,
                "createTime": "2025-01-21 14:36:44",
                "alarm": null,
                "apower": "188W",
                "bpower": "187W",
                "cpower": "183W",
                "avoltage": "229V",
                "bvoltage": "221V",
                "cvoltage": "220V",
                "acurrent": "0.7A",
                "bcurrent": "0.6A",
                "ccurrent": "0.6A"
            },
            {
                "id": 2,
                "deviceId": "001-2",
                "deviceName": "汇聚分支2",
                "deviceType": "汇聚分支",
                "location": "机房",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "离线",
                "temperature": "78",
                "humidity": "29",
                "sd": "烟感",
                "fromDeviceId": "001",
                "deviceInfoId": 1,
                "createTime": "2025-01-21 14:36:44",
                "alarm": {
                    "id": 1,
                    "deviceId": "001-2",
                    "deviceName": "汇聚分支2",
                    "deviceType": "类型",
                    "timestamp": "2025-01-20 10:25:45",
                    "location": "位置",
                    "alarm": "有",
                    "alarmType": "过压",
                    "alarmDescription": "告警描述",
                    "processStatus": "未处理",
                    "processTime": null
                },
                "apower": "188W",
                "bpower": "187W",
                "cpower": "181.1W",
                "avoltage": "229V",
                "bvoltage": "221V",
                "cvoltage": "220V",
                "acurrent": "0.7A",
                "bcurrent": "0.6A",
                "ccurrent": "0.6A"
            },
            {
                "id": 3,
                "deviceId": "001-3",
                "deviceName": "汇聚分支3",
                "deviceType": "汇聚分支",
                "location": "机房",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "离线",
                "temperature": "78",
                "humidity": "29",
                "sd": "烟感",
                "fromDeviceId": "001",
                "deviceInfoId": 1,
                "createTime": "2025-01-21 14:36:44",
                "alarm": {
                    "id": 2,
                    "deviceId": "001-3",
                    "deviceName": "汇聚分支3",
                    "deviceType": "类型",
                    "timestamp": "2025-01-20 10:25:45",
                    "location": "位置3",
                    "alarm": "有",
                    "alarmType": "过压",
                    "alarmDescription": "告警描述3",
                    "processStatus": "已处理",
                    "processTime": "2025-01-20 10:26:54"
                },
                "apower": "188W",
                "bpower": "187W",
                "cpower": "181.1W",
                "avoltage": "229V",
                "bvoltage": "221V",
                "cvoltage": "220V",
                "acurrent": "0.7A",
                "bcurrent": "0.6A",
                "ccurrent": "0.6A"
            },
            {
                "id": 4,
                "deviceId": "001-4",
                "deviceName": "汇聚分支4",
                "deviceType": "汇聚分支",
                "location": "机房",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "离线",
                "temperature": "78",
                "humidity": "29",
                "sd": "烟感",
                "fromDeviceId": "001",
                "deviceInfoId": 1,
                "createTime": "2025-01-21 14:36:44",
                "alarm": null,
                "apower": "188W",
                "bpower": "187W",
                "cpower": "181.1W",
                "avoltage": "229V",
                "bvoltage": "221V",
                "cvoltage": "220V",
                "acurrent": "0.7A",
                "bcurrent": "0.6A",
                "ccurrent": "0.6A"
            },
            {
                "id": 5,
                "deviceId": "001-5",
                "deviceName": "汇聚分支5",
                "deviceType": "汇聚分支",
                "location": "机房",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "在线",
                "temperature": "78",
                "humidity": "29",
                "sd": "烟感",
                "fromDeviceId": "001",
                "deviceInfoId": 1,
                "createTime": "2025-01-21 14:36:44",
                "alarm": null,
                "apower": "188W",
                "bpower": "187W",
                "cpower": "181.1W",
                "avoltage": "229V",
                "bvoltage": "221V",
                "cvoltage": "220V",
                "acurrent": "0.7A",
                "bcurrent": "0.6A",
                "ccurrent": "0.6A"
            },
            {
                "id": 6,
                "deviceId": "001-6",
                "deviceName": "汇聚分支6",
                "deviceType": "汇聚分支",
                "location": "机房",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "离线",
                "temperature": "78",
                "humidity": "29",
                "sd": "烟感",
                "fromDeviceId": "001",
                "deviceInfoId": 1,
                "createTime": "2025-01-21 14:36:44",
                "alarm": null,
                "apower": "188W",
                "bpower": "187W",
                "cpower": "181.1W",
                "avoltage": "229V",
                "bvoltage": "221V",
                "cvoltage": "220V",
                "acurrent": "0.7A",
                "bcurrent": "0.6A",
                "ccurrent": "0.6A"
            },
            {
                "id": 7,
                "deviceId": "001-7",
                "deviceName": "汇聚分支7",
                "deviceType": "汇聚分支",
                "location": "机房",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "在线",
                "temperature": "78",
                "humidity": "29",
                "sd": "烟感",
                "fromDeviceId": "001",
                "deviceInfoId": 1,
                "createTime": "2025-01-21 14:36:44",
                "alarm": null,
                "apower": "188W",
                "bpower": "187W",
                "cpower": "181.1W",
                "avoltage": "229V",
                "bvoltage": "221V",
                "cvoltage": "220V",
                "acurrent": "0.7A",
                "bcurrent": "0.6A",
                "ccurrent": "0.6A"
            },
            {
                "id": 26,
                "deviceId": "001-8",
                "deviceName": "汇聚分支8",
                "deviceType": "汇聚分支",
                "location": "机房",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "离线",
                "temperature": "78",
                "humidity": "29",
                "sd": "烟感",
                "fromDeviceId": "001",
                "deviceInfoId": 1,
                "createTime": "2025-01-21 14:36:44",
                "alarm": null,
                "apower": "188W",
                "bpower": "187W",
                "cpower": "181.1W",
                "avoltage": "229V",
                "bvoltage": "221V",
                "cvoltage": "220V",
                "acurrent": "0.7A",
                "bcurrent": "0.6A",
                "ccurrent": "0.6A"
            }
        ],
        "alarm": {
            "id": 14,
            "deviceId": "001",
            "deviceName": "汇聚",
            "deviceType": "设备类型",
            "timestamp": "2025-01-20 10:25:45",
            "location": "位置",
            "alarm": "有",
            "alarmType": "过压",
            "alarmDescription": "告警描述",
            "processStatus": "未处理",
            "processTime": null
        },
        "apower": "178W",
        "bpower": "180W",
        "cpower": "179W",
        "avoltage": "223V",
        "bvoltage": "221V",
        "cvoltage": "220V",
        "acurrent": "0.8A",
        "bcurrent": "0.7A",
        "ccurrent": "0.6A"
     },
     "B": {
        "id": 2,
        "deviceId": "002",
        "deviceName": "汇聚2",
        "deviceType": "汇聚",
        "location": "柜体编号2",
        "network": "B路",
        "level": 1,
        "hwVersion": "1.1",
        "swVersion": "1.2",
        "status": "状态",
        "temperature": "52",
        "humidity": "14",
        "sd": "烟感",
        "fromDeviceId": "0",
        "uploadTime": "2025-01-21 14:20:06",
        "uid": "2",
        "isEnd": "1",
        "componentUrl": "52236b33-fe36-45bf-9bef-91c759494e19.png",
        "branch": [
            {
                "id": 8,
                "deviceId": "002-1",
                "deviceName": "汇聚分支1",
                "deviceType": "汇聚分支",
                "location": "机房1",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "在线",
                "temperature": "78",
                "humidity": "19",
                "sd": "烟感",
                "fromDeviceId": "002",
                "deviceInfoId": 2,
                "createTime": "2025-01-21 14:41:33",
                "alarm": {
                    "id": 3,
                    "deviceId": "002-1",
                    "deviceName": "汇聚分支31",
                    "deviceType": "类型",
                    "timestamp": "2025-01-20 10:25:45",
                    "location": "位置31",
                    "alarm": "有",
                    "alarmType": "过压",
                    "alarmDescription": "告警描述31",
                    "processStatus": "未处理",
                    "processTime": null
                },
                "apower": "189W",
                "bpower": "192.2W",
                "cpower": "180W",
                "avoltage": "221V",
                "bvoltage": "222V",
                "cvoltage": "220V",
                "acurrent": "0.2A",
                "bcurrent": "0.8A",
                "ccurrent": "0.2A"
            },
            {
                "id": 9,
                "deviceId": "002-2",
                "deviceName": "汇聚分支2",
                "deviceType": "汇聚分支",
                "location": "机房2",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "离线",
                "temperature": "78",
                "humidity": "19",
                "sd": "烟感",
                "fromDeviceId": "002",
                "deviceInfoId": 2,
                "createTime": "2025-01-21 14:41:33",
                "alarm": {
                    "id": 15,
                    "deviceId": "002-2",
                    "deviceName": "柜体",
                    "deviceType": "类型",
                    "timestamp": "2025-01-20 10:25:45",
                    "location": "位置31",
                    "alarm": "有",
                    "alarmType": "过压",
                    "alarmDescription": "告警描述31",
                    "processStatus": "未处理",
                    "processTime": null
                },
                "apower": "189W",
                "bpower": "192.2W",
                "cpower": "180W",
                "avoltage": "221V",
                "bvoltage": "222V",
                "cvoltage": "220V",
                "acurrent": "0.2A",
                "bcurrent": "0.8A",
                "ccurrent": "0.2A"
            },
            {
                "id": 10,
                "deviceId": "002-3",
                "deviceName": "汇聚分支3",
                "deviceType": "汇聚分支",
                "location": "机房2",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "离线",
                "temperature": "78",
                "humidity": "19",
                "sd": "烟感",
                "fromDeviceId": "002",
                "deviceInfoId": 2,
                "createTime": "2025-01-21 14:41:33",
                "alarm": null,
                "apower": "189W",
                "bpower": "192.2W",
                "cpower": "180W",
                "avoltage": "221V",
                "bvoltage": "222V",
                "cvoltage": "220V",
                "acurrent": "0.2A",
                "bcurrent": "0.8A",
                "ccurrent": "0.2A"
            },
            {
                "id": 11,
                "deviceId": "002-4",
                "deviceName": "汇聚分支4",
                "deviceType": "汇聚分支",
                "location": "机房2",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "在线",
                "temperature": "78",
                "humidity": "19",
                "sd": "烟感",
                "fromDeviceId": "002",
                "deviceInfoId": 2,
                "createTime": "2025-01-21 14:41:33",
                "alarm": null,
                "apower": "189W",
                "bpower": "192.2W",
                "cpower": "180W",
                "avoltage": "221V",
                "bvoltage": "222V",
                "cvoltage": "220V",
                "acurrent": "0.2A",
                "bcurrent": "0.8A",
                "ccurrent": "0.2A"
            },
            {
                "id": 12,
                "deviceId": "002-5",
                "deviceName": "汇聚分支5",
                "deviceType": "汇聚分支",
                "location": "机房2",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "在线",
                "temperature": "78",
                "humidity": "19",
                "sd": "烟感",
                "fromDeviceId": "002",
                "deviceInfoId": 2,
                "createTime": "2025-01-21 14:41:33",
                "alarm": null,
                "apower": "189W",
                "bpower": "192.2W",
                "cpower": "180W",
                "avoltage": "221V",
                "bvoltage": "222V",
                "cvoltage": "220V",
                "acurrent": "0.2A",
                "bcurrent": "0.8A",
                "ccurrent": "0.2A"
            },
            {
                "id": 13,
                "deviceId": "002-6",
                "deviceName": "汇聚分支6",
                "deviceType": "汇聚分支",
                "location": "机房2",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "离线",
                "temperature": "78",
                "humidity": "19",
                "sd": "烟感",
                "fromDeviceId": "002",
                "deviceInfoId": 2,
                "createTime": "2025-01-21 14:41:33",
                "alarm": null,
                "apower": "189W",
                "bpower": "192.2W",
                "cpower": "180W",
                "avoltage": "221V",
                "bvoltage": "222V",
                "cvoltage": "220V",
                "acurrent": "0.2A",
                "bcurrent": "0.8A",
                "ccurrent": "0.2A"
            },
            {
                "id": 14,
                "deviceId": "002-7",
                "deviceName": "汇聚分支7",
                "deviceType": "汇聚分支",
                "location": "机房2",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "在线",
                "temperature": "78",
                "humidity": "19",
                "sd": "烟感",
                "fromDeviceId": "002",
                "deviceInfoId": 2,
                "createTime": "2025-01-21 14:41:33",
                "alarm": null,
                "apower": "189W",
                "bpower": "192.2W",
                "cpower": "180W",
                "avoltage": "221V",
                "bvoltage": "222V",
                "cvoltage": "220V",
                "acurrent": "0.2A",
                "bcurrent": "0.8A",
                "ccurrent": "0.2A"
            },
            {
                "id": 27,
                "deviceId": "002-8",
                "deviceName": "汇聚分支8",
                "deviceType": "汇聚分支",
                "location": "机房2",
                "level": 1,
                "hwVersion": "1",
                "swVersion": "1",
                "status": "在线",
                "temperature": "78",
                "humidity": "19",
                "sd": "烟感",
                "fromDeviceId": "002",
                "deviceInfoId": 2,
                "createTime": "2025-01-21 14:41:33",
                "alarm": null,
                "apower": "189W",
                "bpower": "192.2W",
                "cpower": "180W",
                "avoltage": "221V",
                "bvoltage": "222V",
                "cvoltage": "220V",
                "acurrent": "0.2A",
                "bcurrent": "0.8A",
                "ccurrent": "0.2A"
            }
        ],
        "alarm": null,
        "apower": "178.2W",
        "bpower": "180.3W",
        "cpower": "179.41W",
        "avoltage": "223.1V",
        "bvoltage": "221.1V",
        "cvoltage": "220.1V",
        "acurrent": "0.8A",
        "bcurrent": "0.7A",
        "ccurrent": "0.6A"
     }
    },
      }
    },
    mounted(){
      this.initStage();
      this.getData();
    },
    methods:{
      initStage() {
        this.stage = new Konva.Stage({
          container: this.$refs.stageContainer,
          width: window.innerWidth,
          height: window.innerHeight,
        });
        this.stage.draw();
      },
      getData(){
        // getPowerinfor().then(resp => {
         // 后台返回数据
          // this.Alist = resp.data.A;
          // this.Blist = resp.data.B;
        //  模拟数据

          this.Alist = this.mData.A;
          this.Blist = this.mData.B;
          this.$nextTick(() => {
            this.stage = new Konva.Stage({
              container: this.$refs.stageContainer,
              width: this.$refs.stageContainer.offsetWidth,
              height: this.$refs.stageContainer.offsetHeight,
              draggable: false
            });
            const layer = new Konva.Layer();
              // 创建一个主 Group 来管理所有元素
              const mainGroup = new Konva.Group();
              // 提取创建矩形和文本的函数
              const createRectAndText = (x, y, width, height, fill,textLeft, textRight, name) => {
                const rect = new Konva.Rect({
                  x,
                  y,
                  width,
                  height,
                  fill,
                  stroke: 'black',
                  strokeWidth: 2,
                  name,
                });
                const textLeftObj = new Konva.Text({
                  x: x + 5,
                  y: y + 5,
                  text: textLeft,
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black',
                  align: 'left',
                  textAlign: 'left',
                });
                const textRightObj = new Konva.Text({
                  x: x + width - 20,
                  y: y + height - 15,
                  text: textRight,
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black',
                  align: 'right',
                  textAlign: 'right',
                });
                //创建斜线
                const line = new Konva.Line({
                  points: [x + width, y, x, y + height],
                  stroke: 'black',
                  strokeWidth: 2,
                });
                layer.add(rect);
                layer.add(textLeftObj);
                layer.add(textRightObj);
                layer.add(line);
                // 创建一个组来管理矩形和文本
                const group = new Konva.Group();
                group.add(rect);
                group.add(textLeftObj);
                group.add(textRightObj);
                group.add(line);
                // 添加点击事件监听器
                rect.on('click', () => {
                  // this.handleDialog(name);
                });
                // return { rect, textObj };
                // layer.add(group);
                mainGroup.add(group);
                return group;
              };

               // 提取创建矩形和文本的函数
                const createRectText = (x, y, width, height, fill,textLeft, textRight, name) => {
                const rect = new Konva.Rect({
                  x,
                  y,
                  width,
                  height,
                  fill,
                  stroke: 'black',
                  strokeWidth: 2,
                  name,
                });
                const textLeftObj = new Konva.Text({
                  x: x + 5,
                  y: y + 5,
                  text: textLeft,
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black',
                  align: 'left',
                  textAlign: 'left',
                });
                const textRightObj = new Konva.Text({
                  x: x + width - 20,
                  y: y + height - 15,
                  text: textRight,
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black',
                  align: 'right',
                  textAlign: 'right',
                });
                layer.add(rect);
                layer.add(textLeftObj);
                layer.add(textRightObj);
           
                // 创建一个组来管理矩形和文本
                const group = new Konva.Group();
                group.add(rect);
                group.add(textLeftObj);
                // group.add(textRightObj);
                // 添加点击事件监听器
                rect.on('click', () => {
                  // this.handleDialog(name);
                });
                // return { rect, textObj };
                // layer.add(group);
                mainGroup.add(group);
                return group;
              };
              // 提取创建虚线矩形和文本的函数
              const createDashedRectAndText = (x, y, width, height, text, name) => {
                const rect = new Konva.Rect({
                  x,
                  y,
                  width,
                  height,
                  stroke: 'black',
                  strokeWidth: 2,
                  dash: [5, 3],
                  fill: 'transparent',
                  name,
                  draggable:true
                });
                const textObj = new Konva.Text({
                  x: x + 20,
                  y: y - 20,
                  text,
                  fontSize: 14,
                  fontFamily: 'Arial',
                  fill: 'black',
                  align: 'left'
                });
                // 创建一个组来管理虚线矩形和文本
                const group = new Konva.Group();
                group.add(rect);
                group.add(textObj);
                // layer.add(group);
                mainGroup.add(group);
                return group;
              };
              // 创建箭头函数
              const createArrow = (x, y, length, color, name) => {
                
                const arrow = new Konva.Arrow({
                  points: [x, y, x, y + length],
                  pointerLength: 10,
                  pointerWidth: 10,
                  fill: color,
                  stroke: color,
                  strokeWidth: 2,
                  name
                });
                // layer.add(arrow);
                return arrow;
              };
                 // 创建反方向箭头
               const changeArrowDirection = (x, y, length, color, name) => {
                const arrow = new Konva.Arrow({
                  points: [30, 120, 30, 220,30,150],
                  pointerLength: 10,
                  pointerWidth: 10,
                  fill: color,
                  stroke: color,
                  strokeWidth: 2,
                  name
                });
                // layer.add(arrow);
                return arrow;
              };
              // 创建实心圆函数
              const createCircle = (x, y, radius, fill, name) => {
                const circle = new Konva.Circle({
                  x,
                  y,
                  radius,
                  fill,
                  stroke: 'black',
                  strokeWidth: 2,
                  name
                });
                // layer.add(circle);
                return circle;
              };
              // 创建贯穿线函数
              const createLine = (x1, y1, x2, y2, stroke, strokeWidth, name) => {
                console.log('[x1, y1, x2, y2]',[x1, y1, x2, y2])
                const line = new Konva.Line({
                  points: [x1, y1, x2, y2],
                  stroke,
                  strokeWidth,
                  name
                });
                // layer.add(line);
                return line;
              };
              const xSpacing = 60;
              const yStart = 40;
              const dcScreenCabinetWidth = 300; // 直流屏柜宽度
              const dcPowerCabinetWidth = 180; // 直流配电柜宽度
              const dcPowerCabinetHeight = 150; // 直流配电柜高度
              const dcScreenCabinetHeight = 100; // 直流屏柜高度
              const dcPowerACDCWidth = 130; //单独AC/DC配置
              const dcPowerACDCHeight = 90;
              const subComponentWidth = 35; // 子组件宽度
              const subComponentHeight = 35; // 子组件高度
              const subComponentSpacing = 20; // 子组件间隔
              // 进电线的位置和尺寸
              const inletWireWidth = 20;
              const inletWireHeight = 90;
              if (this.Alist) {
                // 创建 A 路相关元素的组
                const aGroup = new Konva.Group();
                // 绘制进电线 A 1路圆点
                // const inletWireCircleA = createCircle(
                //   xSpacing / 2,
                //   yStart + (dcPowerCabinetHeight - inletWireHeight) / 2,
                //   inletWireWidth / 2,
                //   'green',
                //   'inletWireCircleA'
                // );
                // aGroup.add(inletWireCircleA);
                // A2路圆点
                // const inletWireCircleA1 = createCircle(
                //   xSpacing / 2,
                //   yStart + (dcPowerCabinetHeight+80),
                //   inletWireWidth / 2,
                //   'green',
                //   'inletWireCircleA1'
                // );
                // aGroup.add(inletWireCircleA1);
                // A一路箭头 30，80,30,150
                // const inletWireA = createArrow(
                //   xSpacing / 2,
                //   yStart + (dcPowerCabinetHeight - inletWireHeight) / 2 + inletWireWidth / 2,
                //   inletWireHeight - inletWireWidth,
                //   'green',
                //   'inletWireA'
                // );
                // aGroup.add(inletWireA);
                //A 二路箭头
                // const inletWireA1 = changeArrowDirection(
                //   xSpacing / 2,
                //   yStart + (dcPowerCabinetHeight - inletWireHeight) / 2 + inletWireWidth*4 ,
                //   30,
                //   'green',
                //   'inletWireA1'
                // );
                // aGroup.add(inletWireA1);
                // A路 第一条线进入直流柜
                const verticalLineA_1 = createLine(
                 2,
                  110,
                  85,
                  110,
                  'black',
                  3,
                  'verticalLineA'
                );
                // A路 第一条线进入直流柜 后面第二条线
                const verticalLineA_1_1 = createLine(
                  145,
                  110,
                  200,
                  110,
                  'black',
                  3,
                  'verticalLineA'
                );
                // A路 第二条线进入直流柜
                const verticalLineA_2 = createLine(
                 2,
                  210,
                  79,
                  210,
                  'black',
                  3,
                  'verticalLineA'
                );
              
                // A路 第二条线进入直流柜 后半段
                const verticalLineA_2_2 = createLine(
                  145,
                  210,
                  200,
                  210,
                  'black',
                  3,
                  'verticalLineA'
                );
                // 中间
                const lineCenter = createLine(
                  350,
                  145,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
                  420, 
                  145,
                  'balck',
                  2,
                  'lineCenter'
                );

                 // 后半段线，宽度设置为3
                const verticalLineA_3 = createLine(
                  420,
                  110,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
                  520, 
                  110,
                  '#040404',
                  3,
                  'verticalLineA_3'
                );
                // 
                const verticalLineA_3_1 = createLine(
                  520,
                  110,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
                  790, 
                  110,
                  '#040404',
                  3,
                  'verticalLineA_3_1'
                );
                const verticalLineA_3_2 = createLine(
                  850,
                  110,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
                  940, 
                  110,
                  '#040404',
                  3,
                  'verticalLineA_3_2'
                );
                // // 后半段线，宽度设置为1 330+
                // const verticalLineA_4 = createLine(
                //   690,
                //   145,
                //   // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100
                //   930, 
                //   145,
                //   'red',
                //   13,
                //   'verticalLineA_2'
                // );
                const cGroup = new Konva.Group();
                // aGroup.add(verticalLineA);
                cGroup.add(verticalLineA_1)
                cGroup.add(verticalLineA_1_1)
                cGroup.add(verticalLineA_2)
                cGroup.add(verticalLineA_2_2)
                cGroup.add(lineCenter)
                cGroup.add(verticalLineA_3)
                cGroup.add(verticalLineA_3_1)
                cGroup.add(verticalLineA_3_2)

                // cGroup.add(verticalLineA_4)
                // A1路总开关
                const imageMainswitch = new Image();
                imageMainswitch.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imagezongkai = imageMainswitch;
                  // -60,
                  // 115,
                  // 79,
                  // 115,
                  const aMainSwitchImage = new Konva.Image({
                    x: 80,
                    y: 79,
                    image: this.imagezongkai, // 使用加载完成的图片对象
                    width: 70,
                    height: 70,
                    name: 'aMainSwitchImage',
                    // rotation:-90,
                    // draggable:true
                    // scaleX: -1  // 水平翻转
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: 80,
                    y: 115,
                    width: 70,
                    height: 70,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  aGroup.add(whiteCover);
                  aGroup.add(aMainSwitchImage);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageMainswitch.src = require("@/assets/openswitch.png");
                // 创建一个 Konva.Text 对象来显示开关名称
                const switchNameText = new Konva.Text({
                  x: 100,
                  y: 88, // 在开关上方显示
                  text: '100A/3P',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(switchNameText);

               // A2路总开关
               const imageMainswitch2 = new Image();
                imageMainswitch2.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量s
                  this.imagezongkai2 = imageMainswitch2;
                  const aMainSwitchImage2 = new Konva.Image({
                    x: 80,
                    y: 179,
                    image: this.imagezongkai2, // 使用加载完成的图片对象
                    width: 70,
                    height: 70,
                    name: 'aMainSwitchImage2',
                    // rotation:-90,
                    // draggable:true
                    // scaleX: -1  // 水平翻转
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: xSpacing + subComponentSpacing,
                    y: yStart + subComponentSpacing + subComponentHeight * 2 - 15,
                    width: subComponentWidth * 2,
                    height: subComponentHeight * 2,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  // aGroup.add(whiteCover);
                  aGroup.add(aMainSwitchImage2);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageMainswitch2.src = require("@/assets/openswitch.png");


                // 创建一个 Konva.Text 对象来显示开关名称
                const switchNameText2 = new Konva.Text({
                  x: 100,
                  y: 188, // 在开关上方显示
                  text: '100A/3P',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(switchNameText2);


                //A路AC/DC
                const aRectifierModule = createRectAndText(
                  xSpacing + subComponentSpacing*4 + subComponentWidth*2,
                  yStart + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing,
                  // dcPowerCabinetWidth,
                  // dcScreenCabinetHeight,
                  dcPowerACDCWidth,
                  dcPowerACDCHeight,
                  'white',
                  'AC',
                  'DC',
                  'aRectifierModule'
                );
                aGroup.add(aRectifierModule);

                   //A路直流电源柜
                const aRectA = createRectText(
                  60,
                  yStart + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing -50,
                  // dcPowerCabinetWidth,
                  // dcScreenCabinetHeight,
                  550,
                  230,
                  '',
                  'DC-A05',
                  '',
                  'aRectA'
                );
                aGroup.add(aRectA);
                // 48/600A上面的长方形
                const aRectAn = createRectText(
                  199,
                  89 ,
                  // dcPowerCabinetWidth,
                  // dcScreenCabinetHeight,
                  150,
                  130,
                  '',
                  '',
                  '',
                  'aRectAn'
                );
                aGroup.add(aRectAn);
                // 创建一个 Konva.Text 对象来显示名称
                const rectifierModuleName = new Konva.Text({
                  x: xSpacing + subComponentSpacing * 5 + subComponentWidth*2-20, // 与 aRectifierModule 相同的 x 坐标
                  y: yStart + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing - 15, // 在 aRectifierModule 上方适当位置
                  text: '48/600A直流电源', // 这里替换为你想要显示的实际名称
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(rectifierModuleName);
                const children = aRectifierModule.getChildren();
                const textAC = children[1];
                const textDC = children[2];
                if (textAC) {
                  // 调整 'AC' 文字的大小和位置
                  textAC.fontSize(20); // 设置字体大小为 20
                  textAC.x(textAC.x() + 10); // 向右移动 10 个单位
                  textAC.y(textAC.y() + 15);  // 向上移动 5 个单位
                }
                if (textDC) {
                  // 调整 'DC' 文字的大小和位置
                  textDC.fontSize(20); // 设置字体大小为 20
                  textDC.x(textDC.x()-25); // 向右移动 10 个单位
                  textDC.y(textDC.y() - 15);  // 向下移动 5 个单位
                }
                // 获取 aRectifierModule 的位置和尺寸信息
                const aRectifierX = aRectifierModule.children[0].x();
                const aRectifierY = aRectifierModule.children[0].y();
                const aRectifierWidth = aRectifierModule.children[0].width();
                const aRectifierHeight = aRectifierModule.children[0].height();

                // 向下引申的线
                const downLine = createLine(
                  aRectifierX + aRectifierWidth / 2, // 从矩形底部中间开始
                  aRectifierY + aRectifierHeight,
                  aRectifierX + aRectifierWidth / 2,
                  aRectifierY + aRectifierHeight + 50, // 向下延伸 50 像素
                  'black',
                  2,
                  'downLineFromRect'
                );
                // 右侧引申的线
                const rightLine = createLine(
                  aRectifierX + aRectifierWidth, // 从矩形右侧中间开始
                  aRectifierY + aRectifierHeight / 2,
                  aRectifierX + aRectifierWidth + 50, // 向右延伸 50 像素
                  aRectifierY + aRectifierHeight / 2,
                  'black',
                  2,
                  'rightLineFromRect'
                );
                // 右侧引申线再向下延伸的线
                const rightDownLine = createLine(
                  aRectifierX + aRectifierWidth + 50, // 从右侧引申线的末端开始
                  aRectifierY + aRectifierHeight / 2,
                  aRectifierX + aRectifierWidth + 50,
                  aRectifierY + aRectifierHeight + 50, // 向下延伸到和向下引申线相同的高度
                  'black',
                  2,
                  'rightDownLineFromRect'
                );
                //引申地线
                const connectLine = createLine(
                  aRectifierX + aRectifierWidth / 2,
                  aRectifierY + aRectifierHeight + 50,
                  aRectifierX + aRectifierWidth + 50,
                  aRectifierY + aRectifierHeight + 50,
                  'black',
                  4,
                  'connectLine'
                );
                const lineMidX = (aRectifierX + aRectifierWidth / 2 + aRectifierX + aRectifierWidth + 50) / 2;
                const lineMidY = aRectifierY + aRectifierHeight + 50;
                const imageOnLine  = new Image();
                imageOnLine.onload = () => {
                  const konvaImage = new Konva.Image({
                    x: lineMidX - 35, // 根据图片大小调整位置
                    y: lineMidY - 44, // 根据图片大小调整位置
                    image: imageOnLine,
                    width: 88, // 图片宽度
                    height: 88, // 图片高度
                    name: 'imageOnLine',
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: lineMidX - 15,
                    y: lineMidY - 20,
                    width: 40,
                    height: 40,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  aGroup.add(whiteCover);
                  aGroup.add(konvaImage);
                  layer.draw();
                };
                imageOnLine.src = require("@/assets/ground1.png");
                aGroup.add(downLine);
                aGroup.add(rightLine);
                aGroup.add(rightDownLine);
                aGroup.add(connectLine);
                // aGroup.add(imageOnLine);

                // A路汇聚终端
                const imageAterm = new Image();
                imageAterm.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imageTerm = imageAterm;
                  const aTerminal = new Konva.Image({
                    x: 455,
                    y: 80,
                    image: this.imageTerm, // 使用加载完成的图片对象
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    name: 'aTerminal',
                    // draggable:true
                  });
                  // aGroup.add(aTerminal);
                  layer.draw();
                  this.stage.draw();
                };
                imageAterm.src = require("@/assets/openswitch.png");
                // 创建一个 Konva.Text 对象来显示名称
                const aTerminalName = new Konva.Text({
                  x: 489,
                  y: 80,
                  text: 'DC 600A/2P', // 这里替换为你想要显示的实际名称
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                // aGroup.add(aTerminalName);
                // 第四个开关线
              //   const verticalLineA_4 = createLine(
              //     420,
              //     160,
              //     // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
              //     470, 
              //     160,
              //     '#040404',
              //     3,
              //     'verticalLineA_4'
              //   );
              //   cGroup.add(verticalLineA_4)
              //   const verticalLineA_4_1 = createLine(
              //     520,
              //     160,
              //     // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
              //     690, 
              //     160,
              //     '#040404',
              //     3,
              //     'verticalLineA_4_1'
              //   );
              //   cGroup.add(verticalLineA_4_1)
              // //  第四个开关
              // const imageAterm4 = new Image();
              //   imageAterm4.onload = () => {
              //     // 图片加载完成后，更新 imagezongkai 变量
              //     this.imageTerm4 = imageAterm4;
              //     const aTerminal = new Konva.Image({
              //       x: 455,
              //       y: 130,
              //       image: this.imageTerm4, // 使用加载完成的图片对象
              //       width: subComponentWidth*2,
              //       height: subComponentHeight*2,
              //       name: 'aTerminal',
              //       // draggable:true
              //     });
              //     aGroup.add(aTerminal);
              //     layer.draw();
              //     this.stage.draw();
              //   };
              //   imageAterm4.src = require("@/assets/openswitch.png");
              //   // 创建一个 Konva.Text 对象来显示名称
              //   const aTerminalName4 = new Konva.Text({
              //     x: 485,
              //     y: 140,
              //     text: 'DC 250A/2P', // 这里替换为你想要显示的实际名称
              //     fontSize: 12,
              //     fontFamily: 'Arial',
              //     fill: 'black'
              //   });
              //   // aGroup.add(aTerminalName4);

              //  // 第5个开关线
              //  const verticalLineA_5 = createLine(
              //     420,
              //     220,
              //     // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
              //     470, 
              //     220,
              //     '#040404',
              //     3,
              //     'verticalLineA_5'
              //   );
              //   cGroup.add(verticalLineA_5)
              //   const verticalLineA_5_1 = createLine(
              //     520,
              //     220,
              //     // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
              //     690, 
              //     220,
              //     '#040404',
              //     3,
              //     'verticalLineA_5_1'
              //   );
              //   cGroup.add(verticalLineA_5_1)
              // //  第5个开关
              // const imageAterm5 = new Image();
              //   imageAterm5.onload = () => {
              //     // 图片加载完成后，更新 imagezongkai 变量
              //     this.imageTerm5 = imageAterm5;
              //     const aTerminal = new Konva.Image({
              //       x: 455,
              //       y: 190,
              //       image: this.imageTerm5, // 使用加载完成的图片对象
              //       width: subComponentWidth*2,
              //       height: subComponentHeight*2,
              //       name: 'aTerminal',
              //       // draggable:true
              //     });
              //     aGroup.add(aTerminal);
              //     layer.draw();
              //     this.stage.draw();
              //   };
              //   imageAterm5.src = require("@/assets/openswitch.png");
              //   // 创建一个 Konva.Text 对象来显示名称
              //   const aTerminalName5 = new Konva.Text({
              //     x: 485,
              //     y: 200,
              //     text: 'DC 250A/2P', // 这里替换为你想要显示的实际名称
              //     fontSize: 12,
              //     fontFamily: 'Arial',
              //     fill: 'black'
              //   });
              //   const a5 = new Konva.Text({
              //     x: 655,
              //     y: 200,
              //     text: '备用', // 这里替换为你想要显示的实际名称
              //     fontSize: 12,
              //     fontFamily: 'Arial',
              //     fill: 'black'
              //   });
              //   // aGroup.add(aTerminalName5);
              //   // aGroup.add(a5);

                // 创建竖线 y1 调节上下 x 和上面的坐标对齐 就是竖线了
                const sxA = createLine(
                  420,
                  80,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100
                  420, 
                  280,
                  'back',
                  4,
                  'sxA'
                );
                aGroup.add(sxA);

                // A路直流输出总开关 第六个
                const imageAdcout = new Image();
                imageAdcout.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imagezongkai = imageAdcout;
                  const aDCOutputSwitch = new Konva.Image({
                    x: 785,
                    y: 76,
                    image: this.imagezongkai, // 使用加载完成的图片对象
                    width: 70,
                    height: 70,
                    name: 'aDCOutputSwitch',
                    draggable:true
                  });
                  const aTerminalName4 = new Konva.Text({
                  x: 655,
                  y: 140,
                  text: '备用', // 这里替换为你想要显示的实际名称
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                // aGroup.add(aTerminalName4);
                aGroup.add(aDCOutputSwitch);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                // 第6个总开
                imageAdcout.src = require("@/assets/switch.png");
                // 创建一个 Konva.Text 对象来显示名称
                const aDCOutputSwitchName = new Konva.Text({
                  x: 785, // 与 aRectifierModule 相同的 x 坐标
                  y: 85, // 在 aRectifierModule 上方适当位置
                  text: 'DC 600666A/2P', // 这里替换为你想要显示的实际名称
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(aDCOutputSwitchName);

                // 创建一个 Konva.Text 对象来显示名称
                const aDCOutputSwitchNamea = new Konva.Text({
                  x: 800, // 与 aRectifierModule 相同的 x 坐标
                  y: 125, // 在 aRectifierModule 上方适当位置
                  text: 'QF',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'red'
                });
                aGroup.add(aDCOutputSwitchNamea);
                //子开关之前的开关 第7个开关
                const imageSplitswitch = new Image();
                imageSplitswitch.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imagezongkai = imageSplitswitch;
                  const aSplitSwitchImage = new Konva.Image({
                    x: 875, // 与 aRectifierModule 相同的 x 坐标
                    y: 84, // 在 aRectifierModule 上方适当位置
                    image: this.imagezongkai, // 使用加载完成的图片对象
                    width: subComponentWidth*1.5,
                    height: subComponentHeight*1.5,
                    name: 'aSplitSwitchImage',
                    // rotation:-90,
                    // scaleX: -1  // 水平翻转
                  });
                  aGroup.add(aSplitSwitchImage);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageSplitswitch.src = require("@/assets/device.png");
                // 创建一个 Konva.Text 对象来显示名称
                const aSplitSwitchImageName = new Konva.Text({
                  x: 845, // 与 aRectifierModule 相同的 x 坐标
                  y: 10, // 在 aRectifierModule 上方适当位置
                  text: '智能电量仪', // 这里替换为你想要显示的实际名称
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                aGroup.add(aSplitSwitchImageName);


                //从此处开始缩放
                 // 与 verticalLineA 垂直的线，从 verticalLineA 中点向下延伸 100 像素

                 // 创建 A 路缩放相关组，竖线A
                const eGroup = new Konva.Group();
                
                //  870
                 const verticalLineAMidX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
                // 145
                 const verticalLineAMidY = yStart + dcPowerCabinetHeight - inletWireHeight / 2;

                 const dlyLine = createLine(
                  900,
                  verticalLineAMidY-this.Alist.branch.length*15,
                  900,
                  verticalLineAMidY + this.Alist.branch.length-25,
                  '#c4c4c4',
                  1,
                  'perpendicularLineA'
                );
                eGroup.add(dlyLine);
                   //直流电源列头柜G1
                const aRectG1 = createRectText(
                  760,
                  yStart + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing -160,
                  // dcPowerCabinetWidth,
                  // dcScreenCabinetHeight,
                  350,
                  470,
                  '',
                  '直流电源列头柜G1',
                  '',
                  'aRectG1'
                );
                aGroup.add(aRectG1);

                const perpendicularLineA = createLine(
                  940,
                  verticalLineAMidY-this.Alist.branch.length*18,
                  940,
                  verticalLineAMidY + this.Alist.branch.length*45,
                  'black',
                  0.8,
                  'perpendicularLineA'
                );
                eGroup.add(perpendicularLineA);
                //根据数组长度延伸对应条数的线
                if(this.Alist.branch){
                  const branchLength = this.Alist.branch.length;
                  // 870
                  const verticalLineAEndX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
                  const verticalLineAY = yStart + dcPowerCabinetHeight - inletWireHeight / 2-branchLength*3;
                  const lineSpacing = 50; // 引申线之间的间距 
                  const rectY = branchLength*60; // 计算条线占据高度
                  const JGroup = new Konva.Group();
                  // A数组横线
                  for (let i = 0; i < branchLength; i++) {
                    const lineRight = createLine(
                      940,
                      verticalLineAY+ i * lineSpacing -108, 
                      870 +100, // 这里设置一个固定的延伸长度，你可以根据需要调整
                      verticalLineAY + i * lineSpacing-108,
                      'red',
                      2,
                      `rightExtendedLine${i}`
                    );
                    // JGroup.add(newLine);
                    eGroup.add(lineRight);
                    const newLine = createLine(
                      1015,
                      verticalLineAY+ i * lineSpacing -108, 
                      1015 + (i*5)+110, // 这里设置一个固定的延伸长度，你可以根据需要调整
                      verticalLineAY + i * lineSpacing-108,
                      'red',
                     1,
                      `rightExtendedLine${i}`
                    );
                    // JGroup.add(newLine);
                    eGroup.add(newLine);
                   // 修改 newLine1 的创建逻辑，使其连接到右侧矩形框
const newLine1 = createLine(
  1015 + (i*5)+110, // 起点 x 坐标保持不变
  verticalLineAY + i * lineSpacing-108, // 起点 y 坐标
  1015 + (i*5)+110, // 终点 x 坐标保持不变
  verticalLineAY + (i-1) * lineSpacing*9-90, // 终点 y 坐标调整为对应矩形框的中心位置
  'red',
  1,
  `upExtendedLine${i}`
);

// 添加一个水平连接线，连接到右侧矩形框
const horizontalConnector = createLine(
  1015 + (i*5)+110, // 起点 x 坐标
  verticalLineAY + (i-1) * lineSpacing*9-90, // 起点 y 坐标与 newLine1 终点对齐
  1630, // 终点 x 坐标 (矩形框左边界)
  verticalLineAY + (i-1) * lineSpacing*9-90, // 终点 y 坐标保持相同
  'red',
  1,
  `horizontalConnector${i}`
);

// 将新创建的线条添加到组中
eGroup.add(newLine1);
eGroup.add(horizontalConnector);
                    // eGroup.add(rightExtendedLine);
                    // cGroup.add(JGroup);
                    // eGroup.add(rightExtendedLine);
                    let imageSrc;
                    if (this.Alist.branch[i].status == "在线") {
                      imageSrc = require("@/assets/switch.png");
                    }else if(this.Alist.branch[i].status == "故障"){
                      imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                    } else {
                      imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                    }
                    const image = new Image();
                    image.onload = () => {
                      const lineImage = new Konva.Image({
                        x: verticalLineAEndX + 98, // 图片的 x 坐标，可以根据需要调整
                        y: verticalLineAY + i * lineSpacing - 134, // 图片的 y 坐标，可以根据需要调整
                        image: image,
                        width: subComponentWidth*1.5,
                        height: subComponentHeight*1.5,
                        name: `lineImage${i}`,
                      });
                      // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                      const whiteCoverA = new Konva.Rect({
                        x: verticalLineAEndX + 98,
                        y: verticalLineAY + i * lineSpacing - 25,
                        width: subComponentWidth * 1.5-5,
                        height: subComponentHeight * 1.5,
                        fill: 'white'
                      });
                      // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                      eGroup.add(whiteCoverA);
                      const textA = new Konva.Text({
                        x: verticalLineAEndX + 99, // 文字的 x 坐标，与图片 x 坐标相同
                        y: verticalLineAY + i * lineSpacing - 135, // 文字的 y 坐标，在图片上方适当位置
                        text: this.Alist.branch[i].deviceType, // 要显示的文字
                        fontSize: 12, // 文字大小
                        fill: 'black' // 文字颜色
                      });
                      const textA_1 = new Konva.Text({
                        x: verticalLineAEndX + 120, // 文字的 x 坐标，与图片 x 坐标相同
                        y: verticalLineAY + i * lineSpacing - 100, // 文字的 y 坐标，在图片上方适当位置
                        text: "", // 要显示的文字
                        fontSize: 8, // 文字大小
                        fill: 'black' // 文字颜色
                      });
                      eGroup.add(lineImage);
                      aGroup.add(eGroup);
                      eGroup.add(textA); // 将文字添加到 eGroup 中
                      eGroup.add(textA_1);
                      layer.draw();
                      this.stage.draw();
                    };
                    image.src = imageSrc;

                     // 创建屏柜
                     const HGroup = new Konva.Group();
                    // 创建和数组 branch 长度一样数量的矩形框，从上到下排列 矩形电源柜
                    const branchLengthA = this.Alist.branch.length;
                    for (let j = 0; j < branchLengthA; j++) {
                      //  verticalLineAEndX =870
                      const rect = new Konva.Rect({
                        x: verticalLineAEndX + 760, // 矩形的 x 坐标，根据需要调整
                        y: verticalLineAY + (j-1) * lineSpacing*7-130, // 矩形的 y 坐标，根据需要调整
                        width: 180, // 矩形的宽度，根据需要调整
                        height: 280, // 矩形的高度，根据需要调整
                        // fill: 'blue' // 矩形的填充颜色，根据需要调整
                        stroke: 'black',
                      });
                      HGroup.add(rect);
                      // 计算线的起点和终点坐标
                      const lineXStart = rect.x();
                      const lineXEnd = rect.x() + rect.width();
                      const lineY = rect.y() + rect.height() / 2;

                      // 创建线
                      const linebox = new Konva.Line({
                        points: [lineXStart, lineY, lineXEnd, lineY], // 线的起点和终点坐标
                        stroke: 'black', // 线的颜色
                        strokeWidth: 1, // 线的宽度
                      });
                      HGroup.add(linebox);
                      const imageLineswitch = new Image();
                      imageLineswitch.onload = () => {
                        // 图片加载完成后，更新 imagezongkai 变量
                        this.imagezongkai = imageLineswitch;
                        const lineImage = new Konva.Image({
                          x: (lineXStart + lineXEnd) / 2-30,
                          y: lineY - 18,
                          image: this.imagezongkai, // 使用加载完成的图片对象
                          width: 40,
                          height: 40,
                          name: 'lineImage',
                        });
                        HGroup.add(lineImage);
                      }
                      imageLineswitch.src = require("@/assets/openswitch.png");
                      const imageObj = new Image();
                      imageObj.onload = () => {
                        // 图片加载完成后，更新 imagezongkai 变量
                        this.imagezongkai = imageObj;
                        const lineImagea = new Konva.Image({
                          x: (lineXStart + lineXEnd) / 2+10,
                          y: lineY - 18,
                          image: this.imagezongkai, // 使用加载完成的图片对象
                          width: 40,
                          height: 40,
                          name: 'lineImagea',
                        });
                        HGroup.add(lineImagea);
                      }
                      imageObj.src = require("@/assets/device.png");
                    }
                    cGroup.add(HGroup);
                    // 限制矩形框在A路的50%高度内
                    this.halfHeightA = this.stage.height() / 2-30;
                    if (rectY > this.halfHeightA) {
                      if(this.Alist.branch.length<10){ 
                        this.scaleAgroup = this.halfHeightA / rectY;
                        eGroup.scale({ x: 1, y: this.scaleAgroup });
                      }else if(this.Alist.branch.length >=10 && this.Alist.branch.length<15){ 
                        console.log(111111)
                        this.scaleAgroup = this.halfHeightA / rectY+0.03;
                        eGroup.scale({ x: 1, y: this.scaleAgroup });
                        JGroup.scale({ x: 1, y: this.scaleAgroup });
                      }else if(this.Alist.branch.length >=15 && this.Alist.branch.length<20){
                          this.scaleAgroup = this.halfHeightA / rectY+0.05;
                          eGroup.scale({ x: 1, y: this.scaleAgroup});
                      }else if(this.Alist.branch.length >=20 && this.Alist.branch.length<25){
                          this.scaleAgroup = this.halfHeightA / rectY+0.05;
                          eGroup.scale({ x: 1, y: this.scaleAgroup});
                      }else{
                          this.scaleAgroup = this.halfHeightA / rectY+0.04;
                          eGroup.scale({ x: 1, y: this.scaleAgroup});
                      }
                    }

                                         // 创建表格
                    const tableWidth = 460; // 表格宽度
                    const tableHeight = this.Alist.branch.length * 20; // 根据 A 路分支数量动态设置表格高度
                    const tableX = verticalLineAEndX + 870; // 表格的 x 坐标，放置在线的末端
                    const tableY = verticalLineAY-730; // 表格的 y 坐标
                    // / 表格的行数和列数
                    const rows = this.Alist.branch.length+1; // 行数根据 A 路分支数量确定
                    // 列数
                    const cols = 2; 
                    // 单元格的宽度和高度
                    const cellWidth = tableWidth / cols;
                    const cellHeight = 50; // 固定单元格高度
                    // 创建一个组来管理表格元素
                    const tableGroup = new Konva.Group();
                    // 第一行（表头）
                    for (let col = 0; col < cols; col++) {
                      const cellX = tableX + col * cellWidth;
                      const cellY = tableY;
                      // 创建表头单元格边框（矩形）
                      const cellRect = new Konva.Rect({
                        x: cellX,
                        y: cellY,
                        width: cellWidth,
                        height: cellHeight,
                        stroke: 'black',
                        strokeWidth: 1,
                        name: `tableCellRect_0_${col}`
                      });
                      // 表头的文本内容
                      let cellTextContent = '';
                      if (col === 0) {
                        cellTextContent = '设备编号';
                      } else if (col === 1) {
                        cellTextContent = '设备名称';
                      }else if (col === 1) {
                        cellTextContent = '设备名称';
                      }else if (col === 1) {
                        cellTextContent = '电流';
                      }else if (col === 1) {
                        cellTextContent = '功率';
                      }else if (col === 1) {
                        cellTextContent = '状态';
                      }
                      // 创建表头单元格中的文本
                      const cellText = new Konva.Text({
                        x: cellX + 5,
                        y: cellY + 5,
                        text: cellTextContent,
                        fontSize: 12,
                        fontFamily: 'Arial',
                        fill: 'black',
                        align: 'center', // 水平居中
                        textAlign: 'center', // 文本内容水平居中
                        verticalAlign: 'middle', // 垂直居中
                        width: cellWidth, // 设置文本宽度与单元格宽度相同
                        height: cellHeight, // 设置文本高度与单元格高度相同
                        name: `tableCellText_0_${col}`
                      });
                      tableGroup.add(cellRect);
                      tableGroup.add(cellText);
                    }
                    // 从第二行开始填充数据
                    this.Alist.branch.forEach((branch, row) => {
                      for (let col = 0; col < cols; col++) {
                        const cellX = tableX + col * cellWidth;
                        const cellY = tableY + (row + 1) * cellHeight; // 注意这里的 row + 1，因为表头占了第一行
                        // 创建单元格边框（矩形）
                        const cellRect = new Konva.Rect({
                          x: cellX,
                          y: cellY,
                          width: cellWidth,
                          height: cellHeight,
                          stroke: 'black',
                          strokeWidth: 1,
                          name: `tableCellRect_${row + 1}_${col}`
                        });
                        // 根据列数填充不同的数据
                        let cellTextContent = '';
                        if (col === 0) {
                          cellTextContent = branch.deviceId;
                        } else if (col === 1) {
                          cellTextContent = branch.deviceName;
                        }
                        // else if (col === 2) {
                        //   cellTextContent = branch.deviceName;
                        // }
                        // 创建单元格中的文本
                        const cellText = new Konva.Text({
                          x: cellX + 5,
                          y: cellY + 5,
                          text: cellTextContent,
                          fontSize: 10,
                          fontFamily: 'Arial',
                          fill: 'black',
                          align: 'center', // 水平居中
                          textAlign: 'center', // 文本内容水平居中
                          verticalAlign: 'middle', // 垂直居中
                          width: cellWidth, // 设置文本宽度与单元格宽度相同
                          height: cellHeight, // 设置文本高度与单元格高度相同
                          name: `tableCellText_${row + 1}_${col}`
                        });
                        // 在每个单元格右侧新建矩形 显示对应的数据
                        const cellRightRectX = cellX + cellWidth;
                        const cellRightRectWidth = 80; // 右侧矩形的宽度
                        // 创建表格的函数
                        const createTable = (x, y, data) => {
                          const tableGroupA = new Konva.Group({
                            name: 'tableGroupA' // 添加类名
                          });
                          const rowHeight = 20;
                          const colWidth = cellRightRectWidth / 2;
                          // 表头
                          const headers = ['电压', '电流', '功率', '状态'];
                          headers.forEach((header, index) => {
                            const headerRect = new Konva.Rect({
                              x: x + index * colWidth+10,
                              y: y,
                              width: colWidth,
                              height: rowHeight,
                              stroke: 'black',
                              strokeWidth: 1,
                              fill: 'lightgray'
                            });
                            const headerText = new Konva.Text({
                              x: x + index * colWidth + 15,
                              y: y + 5,
                              text: header,
                              fontSize: 12,
                              fontFamily: 'Arial',
                              fill: 'black'
                            });
                            tableGroupA.add(headerRect);
                            tableGroupA.add(headerText);
                          });
                          // 数据行
                          const values = [data.avoltage, data.acurrent, data.apower, data.status];
                          values.forEach((value, index) => {
                            const dataRect = new Konva.Rect({
                              x: x + index * colWidth+10,
                              y: y + rowHeight,
                              width: colWidth,
                              height: rowHeight,
                              stroke: 'black',
                              strokeWidth: 1,
                              fill: 'white'
                            });
                            const dataText = new Konva.Text({
                              x: x + index * colWidth + 15,
                              y: y + rowHeight + 5,
                              text: value,
                              fontSize: 12,
                              fontFamily: 'Arial',
                              fill: 'black'
                            });
                            tableGroupA.add(dataRect);
                            tableGroupA.add(dataText);
                          });
                          return tableGroupA;
                        };
                        // 添加鼠标移入和移出事件监听器
                        if (col === 1) {
                          cellText.on('mouseenter', () => {
                            const table = createTable(cellRightRectX, cellY, branch);
                            eGroup.add(table)
                            layer.draw(); // 重新绘制图层以显示更新后的文本
                          });
                          cellText.on('mouseleave', () => {
                            const table = eGroup.findOne('.tableGroupA');
                            if (table) {
                              table.destroy();
                              layer.draw();
                            }
                          });
                        }
                        tableGroup.add(cellRect);
                        tableGroup.add(cellText);
                        // aGroup.add(cellRightRect);
                        // aGroup.add(cellRightText);
                      }
                    });
                    eGroup.add(tableGroup);
                    // 限制矩形框在A路的50%高度内
                    this.halfHeightA = this.stage.height() / 2-30;
                    if (rectY > this.halfHeightA) {
                      if(this.Alist.branch.length<10){ 
                        this.scaleAgroup = this.halfHeightA / rectY;
                        eGroup.scale({ x: 1, y: this.scaleAgroup });
                      }else if(this.Alist.branch.length >=10 && this.Alist.branch.length<15){ 
                        this.scaleAgroup = this.halfHeightA / rectY+0.03;
                        eGroup.scale({ x: 1, y: this.scaleAgroup });
                      }else if(this.Alist.branch.length >=15 && this.Alist.branch.length<20){
                          this.scaleAgroup = this.halfHeightA / rectY+0.05;
                          eGroup.scale({ x: 1, y: this.scaleAgroup});
                      }else if(this.Alist.branch.length >=20 && this.Alist.branch.length<25){
                          this.scaleAgroup = this.halfHeightA / rectY+0.05;
                          eGroup.scale({ x: 1, y: this.scaleAgroup});
                      }else{
                          this.scaleAgroup = this.halfHeightA / rectY+0.04;
                          eGroup.scale({ x: 1, y: this.scaleAgroup});
                      }
                    }   
                    
                  }
                }
                // 将 aGroup 添加到 mainGroup 中
                mainGroup.add(aGroup);
                mainGroup.add(cGroup);
                aGroup.moveToTop();
                layer.draw();
                this.stage.draw();
              }
              
              if (this.Blist) {
                // 创建 B 路相关元素的组
                const bGroup = new Konva.Group();
                // // 绘制进电线 B 路
                // const inletWireCircleB = createCircle(
                //   xSpacing / 2,
                //   this.stage.height() / 2 + 50 + (dcPowerCabinetHeight - inletWireHeight) / 2,
                //   inletWireWidth / 2,
                //   'blue',
                //   'inletWireCircleB'
                // );
                // bGroup.add(inletWireCircleB);
                // const inletWireB = createArrow(
                //   xSpacing / 2,
                //   this.stage.height() / 2 + 50 + (dcPowerCabinetHeight - inletWireHeight) / 2 + inletWireWidth / 2,
                //   inletWireHeight - inletWireWidth,
                //   'blue',
                //   'inletWireB'
                // );
                // bGroup.add(inletWireB);
                // B路与箭头垂直的线
                // const verticalLineB_1 = createLine(
                //   xSpacing / 2,
                //   this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                //   xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 2,
                //   this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                //   'blue',
                //   3,
                //   'verticalLineB_1'
                // );
                // 后半段线，宽度设置为1
                // const verticalLineB_2 = createLine(
                //   xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 2,
                //   this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                //   // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100
                //   xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3, 
                //   this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                //   'blue',
                //   1,
                //   'verticalLineB_2'
                // );
               // B路 第一条线进入直流柜
               const verticalLineB_1 = createLine(
                 2,
                  525,
                  85,
                  525,
                  'blue',
                  3,
                  'verticalLineB'
                );
                // A路 第一条线进入直流柜 后面第二条线
                const verticalLineB_1_1 = createLine(
                  145,
                  525,
                  200,
                  525,
                  'blue',
                  3,
                  'verticalLineA'
                );
                // A路 第二条线进入直流柜
                const verticalLineB_2 = createLine(
                  2,
                  615,
                  79,
                  615,
                  'blue',
                  3,
                  'verticalLineA'
                );
              
                // A路 第二条线进入直流柜 后半段
                const verticalLineB_2_2 = createLine(
                  145,
                  615,
                  200,
                  615,
                  'blue',
                  3,
                  'verticalLineA'
                );
                // 中间
                const lineCenter = createLine(
                  320,
                  555,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
                  420, 
                  555,
                  'blue',
                  2,
                  'lineCenter'
                );

                 // 后半段线，宽度设置为3
                const verticalLineB_3 = createLine(
                  420,
                  555,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
                  510, 
                  555,
                  'blue',
                  3,
                  'verticalLineB_3'
                );
                // 
                const verticalLineB_3_1 = createLine(
                  510,
                  555,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
                  790, 
                  555,
                  'blue',
                  3,
                  'verticalLineB_3_1'
                );
                const verticalLineB_3_2 = createLine(
                  855,
                  555,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100 终点上面一条线的长度控制
                  940, 
                  555,
                  'blue',
                  3,
                  'verticalLineB_3_2'
                );
                // // 后半段线，宽度设置为1 330+
                // const verticalLineA_4 = createLine(
                //   690,
                //   145,
                //   // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100
                //   930, 
                //   145,
                //   'red',
                //   13,
                //   'verticalLineA_2'
                // );
                const dGroup = new Konva.Group();
                // aGroup.add(verticalLineA);
                dGroup.add(verticalLineB_1)
                dGroup.add(verticalLineB_1_1)
                dGroup.add(verticalLineB_2)
                dGroup.add(verticalLineB_2_2)
                dGroup.add(lineCenter)
                dGroup.add(verticalLineB_3)
                dGroup.add(verticalLineB_3_1)
                dGroup.add(verticalLineB_3_2)
                // B路总开关
                const imageBMainswitch = new Image();
                imageBMainswitch.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imagezongkai = imageBMainswitch;
                  const bMainSwitchImage = new Konva.Image({
                    x: xSpacing + subComponentSpacing,
                    y: this.stage.height() / 2 + 50 + subComponentSpacing + subComponentHeight*2-45,
                    image: this.imagezongkai, // 使用加载完成的图片对象
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    name: 'bMainSwitchImage',
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: xSpacing + subComponentSpacing,
                    y: this.stage.height() / 2 + 50 + subComponentSpacing + subComponentHeight*2-15,
                    width: subComponentWidth * 2,
                    height: subComponentHeight * 2,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  bGroup.add(whiteCover);
                  bGroup.add(bMainSwitchImage);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageBMainswitch.src = require("@/assets/openswitch.png");
                // 创建一个 Konva.Text 对象来显示开关名称
                const switchNameText = new Konva.Text({
                  x: xSpacing + subComponentSpacing+20,
                  y: this.stage.height() / 2 + 50 + subComponentSpacing + subComponentHeight*2-35, // 在开关上方显示
                  text: '100A/3P',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(switchNameText); 

                // B2路总开关
               const imageMainswitch2 = new Image();
                imageMainswitch2.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量s
                  this.imagezongkai2 = imageMainswitch2;
                  const aMainSwitchImage2 = new Konva.Image({
                    x: 80,
                    y: 585,
                    image: this.imagezongkai2, // 使用加载完成的图片对象
                    width: 70,
                    height: 70,
                    name: 'aMainSwitchImage2',
                    // rotation:-90,
                    // draggable:true
                    // scaleX: -1  // 水平翻转
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: xSpacing + subComponentSpacing,
                    y: yStart + subComponentSpacing + subComponentHeight * 2 - 15,
                    width: subComponentWidth * 2,
                    height: subComponentHeight * 2,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  // aGroup.add(whiteCover);
                  bGroup.add(aMainSwitchImage2);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageMainswitch2.src = require("@/assets/openswitch.png");


                // 创建一个 Konva.Text 对象来显示开关名称
                const switchNameText2 = new Konva.Text({
                  x: 90,
                  y: 595, // 在开关上方显示
                  text: '100A/3P',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(switchNameText2);

                //B路AC/DC
                const bRectifierModule = createRectAndText(
                  xSpacing + subComponentSpacing*4 + subComponentWidth*2,
                  this.stage.height() / 2 + 50 + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing,
                  dcPowerACDCWidth,
                  dcPowerACDCHeight,
                  'white',
                  'AC',
                  'DC',
                  'bRectifierModule'
                );
                bGroup.add(bRectifierModule);
                
                   //b路直流电源柜
               const aRectb = createRectText(
                  70,
                 480,
                  // dcPowerCabinetWidth,
                  // dcScreenCabinetHeight,
                  550,
                  230,
                  '',
                  'DC-B05',
                  '',
                  'aRectb'
                );
                bGroup.add(aRectb);
                // 创建一个 Konva.Text 对象来显示开关名称
                const bRectifierModuleNameText = new Konva.Text({
                  x: xSpacing + subComponentSpacing*5 + subComponentWidth*2-20,
                  y: this.stage.height() / 2 + 50 +dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing-20, // 在开关上方显示
                  text: '48/600A直流电源',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                const aRectAn = createRectText(
                  200,
                  495,
                  // dcPowerCabinetWidth,
                  // dcScreenCabinetHeight,
                  148,
                  130,
                  '',
                  '',
                  '',
                  'aRectAn'
                );
                bGroup.add(aRectAn);
                bGroup.add(bRectifierModuleNameText); 
                const children = bRectifierModule.getChildren();
                const textAC = children[1];
                const textDC = children[2];
                if (textAC) {
                  // 调整 'AC' 文字的大小和位置
                  textAC.fontSize(20); // 设置字体大小为 20
                  textAC.x(textAC.x() + 10); // 向右移动 10 个单位
                  textAC.y(textAC.y() + 15);  // 向上移动 5 个单位
                }
                if (textDC) {
                  // 调整 'DC' 文字的大小和位置
                  textDC.fontSize(20); // 设置字体大小为 20
                  textDC.x(textDC.x()-25); // 向右移动 10 个单位
                  textDC.y(textDC.y() - 15);  // 向下移动 5 个单位
                }
                // 获取 bRectifierModule 的位置和尺寸信息
                const bRectifierX = bRectifierModule.children[0].x();
                const bRectifierY = bRectifierModule.children[0].y();
                const bRectifierWidth = bRectifierModule.children[0].width();
                const bRectifierHeight = bRectifierModule.children[0].height();
                // 向下引申的线
                const downLine = createLine(
                  bRectifierX + bRectifierWidth / 2, // 从矩形底部中间开始
                  bRectifierY + bRectifierHeight,
                  bRectifierX + bRectifierWidth / 2,
                  bRectifierY + bRectifierHeight + 50, // 向下延伸 50 像素
                  'black',
                  2,
                  'downLineFromRect'
                );
                // 右侧引申的线
                const rightLine = createLine(
                  bRectifierX + bRectifierWidth, // 从矩形右侧中间开始
                  bRectifierY + bRectifierHeight / 2,
                  bRectifierX + bRectifierWidth + 50, // 向右延伸 50 像素
                  bRectifierY + bRectifierHeight / 2,
                  'black',
                  2,
                  'rightLineFromRect'
                );
                // 右侧引申线再向下延伸的线
                const rightDownLine = createLine(
                  bRectifierX + bRectifierWidth + 50, // 从右侧引申线的末端开始
                  bRectifierY + bRectifierHeight / 2,
                  bRectifierX + bRectifierWidth + 50,
                  bRectifierY + bRectifierHeight + 50, // 向下延伸到和向下引申线相同的高度
                  'black',
                  2,
                  'rightDownLineFromRect'
                );
                //引申地线
                const connectLine = createLine(
                  bRectifierX + bRectifierWidth / 2,
                  bRectifierY + bRectifierHeight + 50,
                  bRectifierX + bRectifierWidth + 50,
                  bRectifierY + bRectifierHeight + 50,
                  'black',
                  4,
                  'connectLine'
                );
                const lineMidX = (bRectifierX + bRectifierWidth / 2 + bRectifierX + bRectifierWidth + 50) / 2;
                const lineMidY = bRectifierY + bRectifierHeight + 50;
                const imageOnLine  = new Image();
                imageOnLine.onload = () => {
                  const konvaImage = new Konva.Image({
                    x: lineMidX -35, // 根据图片大小调整位置
                    y: lineMidY - 44, // 根据图片大小调整位置
                    image: imageOnLine,
                    width: 88, // 图片宽度
                    height: 88, // 图片高度
                    name: 'imageOnLine',
                    // rotation:90
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: lineMidX - 15,
                    y: lineMidY - 20,
                    width: 40,
                    height: 40,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  bGroup.add(whiteCover);
                  bGroup.add(konvaImage);
                  layer.draw();
                };
                imageOnLine.src = require("@/assets/ground1.png");
                bGroup.add(downLine);
                bGroup.add(rightLine);
                bGroup.add(rightDownLine);
                bGroup.add(connectLine);

                // B路汇聚终端
                const imageBterm = new Image();
                imageBterm.onload = () => {
                  this.imageBterm = imageBterm;
                  const bTerminal = new Konva.Image({
                    x: xSpacing * 3 + dcScreenCabinetWidth - 35,
                    y: this.stage.height() / 2+ 50 + subComponentSpacing+subComponentHeight+20,
                    image: this.imageBterm, // 使用加载完成的图片对象
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    name: 'bTerminal',
                    draggable:true
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                  const whiteCover = new Konva.Rect({
                    x: xSpacing * 3 + dcScreenCabinetWidth-35,
                    y: this.stage.height() / 2+ 50 + subComponentSpacing+subComponentHeight+20,
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  // bGroup.add(whiteCover);
                  // bGroup.add(bTerminal);
                  layer.draw();
                  this.stage.draw();
                };
                imageBterm.src = require("@/assets/openswitch.png");
                // 创建一个 Konva.Text 对象来显示开关名称
                const bTerminalNameText = new Konva.Text({
                  x: xSpacing * 4 + dcScreenCabinetWidth-35,
                  y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight+10, // 在开关上方显示
                  text: 'DC 600A/2P',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                // bGroup.add(bTerminalNameText); 
              // 创建竖线 y1 调节上下 x 和上面的坐标对齐 就是竖线了
               const sxA = createLine(
                  420,
                  500,
                  // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100
                  420, 
                  690,
                  'back',
                  4,
                  'sxA'
                );
                bGroup.add(sxA);
                // B路直流输出总开关
                const imageBdcout = new Image();
                imageBdcout.onload = () => {
                  this.imageBdcout = imageBdcout;
                  const bDCOutputSwitch = new Konva.Image({
                    x: 790,
                    y: this.stage.height() / 2 + 50 + subComponentSpacing+subComponentHeight*2-18,
                    image: this.imageBdcout, // 使用加载完成的图片对象
                    width: subComponentWidth*2,
                    height: subComponentHeight*2,
                    name: 'bDCOutputSwitch',
                    draggable:true
                  });
                  // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线 第二个白色
                  const whiteCover = new Konva.Rect({
                    x: xSpacing * 5 + dcScreenCabinetWidth + 24,
                    y: this.stage.height() / 2+ 50 + subComponentSpacing+subComponentHeight*2-10,
                    width: subComponentWidth*2-5,
                    height: subComponentHeight,
                    fill: 'white'
                  });
                  // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                  // bGroup.add(whiteCover);
                  bGroup.add(bDCOutputSwitch);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageBdcout.src = require("@/assets/switch.png");
                // 创建一个 Konva.Text 对象来显示开关名称
                const bDCOutputSwitchNameText = new Konva.Text({
                  x: 795,
                  y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight*2-20, // 在开关上方显示
                  text: 'DC 600A/2P',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(bDCOutputSwitchNameText);
                // 创建一个 Konva.Text 对象来显示名称
                const bDCOutputSwitchNameTexta = new Konva.Text({
                  x: 815, // 与 aRectifierModule 相同的 x 坐标
                  y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight*2+35, // 在 aRectifierModule 上方适当位置
                  text: 'QF',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(bDCOutputSwitchNameTexta);  
                //子开关之前的开关
                const imageSplitswitch = new Image();
                imageSplitswitch.onload = () => {
                  // 图片加载完成后，更新 imagezongkai 变量
                  this.imagezongkai = imageSplitswitch;
                  const bSplitSwitchImage = new Konva.Image({
                    x: xSpacing * 7 + dcScreenCabinetWidth + 150,
                    y: this.stage.height() / 2 + 50+ subComponentSpacing+subComponentHeight*2-11,
                    image: this.imagezongkai, // 使用加载完成的图片对象
                    width: subComponentWidth*1.5,
                    height: subComponentHeight*1.5,
                    name: 'bSplitSwitchImage',
                  });
                  bGroup.add(bSplitSwitchImage);
                  // 重新绘制 layer 和 stage
                  layer.draw();
                  this.stage.draw();
                };
                imageSplitswitch.src = require("@/assets/device.png"); 
                // 创建一个 Konva.Text 对象来显示开关名称
                const bSplitSwitchImageNameText = new Konva.Text({
                  x: xSpacing * 7 + dcScreenCabinetWidth + 130,
                  y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight*2-35, // 在开关上方显示
                  text: '智能电量仪',
                  fontSize: 12,
                  fontFamily: 'Arial',
                  fill: 'black'
                });
                bGroup.add(bSplitSwitchImageNameText);  
               // 与 verticalLineB 垂直的线，从 verticalLineB 中点向下延伸 100 像素 
               // 创建 B 路缩放相关组
               const fGroup = new Konva.Group();
               const verticalLineAMidX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
               const verticalLineAMidY = this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2;
              //  B的分支竖线 x向右偏移70 所以后面的都偏移70
               const perpendicularLineB = createLine(
                  verticalLineAMidX+70,
                  verticalLineAMidY-this.Blist.branch.length*8,
                  verticalLineAMidX+70,
                  verticalLineAMidY + this.Blist.branch.length*47,
                  'blue',
                  2,
                  'perpendicularLineB'
                );
                fGroup.add(perpendicularLineB);   
                   //直流电源列头柜G1 B
               const aRectG1 = createRectText(
                  760,
                 423,
                  // dcPowerCabinetWidth,
                  // dcScreenCabinetHeight,
                  350,
                  530,
                  '',
                  '',
                  '',
                  'aRectG1'
                );
                fGroup.add(aRectG1);

                //根据数组长度延伸对应条数的线
                if(this.Blist.branch){
                  const branchLength = this.Blist.branch.length;
                  // 在这里偏移70 和上面的对应
                  const verticalLineAEndX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3 +70;
                  const verticalLineAY = this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2-branchLength*3;
                  const lineSpacing = 50; // 引申线之间的间距
                  const rectY = branchLength*70; // 计算条线占据高度
                  let totalScaleY = 1; // 用于记录总的缩放比例
                  const KGroup = new Konva.Group();
                  for (let i = 0; i < branchLength; i++) {
                    // 第一
                    const newLineB = createLine(
                      verticalLineAEndX,
                      verticalLineAY+ i * lineSpacing, 
                      verticalLineAEndX + i*60+210, // 这里设置一个固定的延伸长度，你可以根据需要调整
                      verticalLineAY + i * lineSpacing,
                      'blue',
                      1,
                      `rightExtendedLineB${i}`
                    );
                    // KGroup.add(newLineB);
                    fGroup.add(newLineB);
                    // 创建向上延伸的线 newLine1，从 newLine 的终点向上延伸，最多8个，得特殊处理 前四个 和后四个
                    const newLineB1 = createLine(
                      verticalLineAEndX + i * 60 + 210, // newLine 的终点 x 坐标
                      verticalLineAY + i * lineSpacing, // newLine 的终点 y 坐标
                      verticalLineAEndX + i * 60 + 210, // 向上延伸，x 坐标不变
                      verticalLineAY + (i-1) * lineSpacing*9-510, // 向上延伸 50 像素，你可以根据需要调整 线上的Y轴间距
                      'blue', // 新线的颜色，你可以根据需要调整
                      1,
                      `upExtendedLineB${i}`
                    );
                    // KGroup.add(newLineB1);
                    fGroup.add(newLineB1);
                    // 创建向右延伸的线 newLine2，从 newLine1 的终点向右延伸
                    const newLine2 = createLine(
                      verticalLineAEndX + i * 60 + 210, 
                      verticalLineAY + (i-1) * lineSpacing*9-510, 
                      1630, 
                      verticalLineAY + (i-1) * lineSpacing*9-510, 
                      'blue', // 新线的颜色，你可以根据需要调整
                      1,
                      `rightExtendedLineFromNewLine1${i}`
                    );
                    // KGroup.add(newLine2);
                    fGroup.add(newLine2);
                    fGroup.add(KGroup);
                    let imageSrc;
                    if (this.Blist.branch[i].status == "在线") {
                      imageSrc = require("@/assets/switch.png");
                    }else if(this.Blist.branch[i].status == "故障"){
                      imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                    } else {
                      imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                    }
                    const image = new Image();
                    image.onload = () => {
                      const lineImage = new Konva.Image({
                        x: verticalLineAEndX + 28, // 图片的 x 坐标，可以根据需要调整
                        y: verticalLineAY + i * lineSpacing - 25, // 图片的 y 坐标，可以根据需要调整
                        image: image,
                        width: subComponentWidth*1.5,
                        height: subComponentHeight*1.5,
                        name: `lineImage${i}`,
                      });
                      // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                      const whiteCoverB = new Konva.Rect({
                        x: verticalLineAEndX + 30,
                        y: verticalLineAY + i * lineSpacing - 16,
                        width: subComponentWidth * 1.5-5,
                        height: subComponentHeight * 1.5,
                        fill: 'white'
                      });
                      // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                      fGroup.add(whiteCoverB);
                      const textB = new Konva.Text({
                        x: verticalLineAEndX + 30, // 文字的 x 坐标，与图片 x 坐标相同
                        y: verticalLineAY + i * lineSpacing - 17 - 10, // 文字的 y 坐标，在图片上方适当位置
                        text: this.Blist.branch[i].deviceType, // 要显示的文字
                        fontSize: 12, // 文字大小
                        fill: 'black' // 文字颜色
                      });
                      const textB_1 = new Konva.Text({
                        x: verticalLineAEndX + 30, // 文字的 x 坐标，与图片 x 坐标相同
                        y: verticalLineAY + i * lineSpacing + 10, // 文字的 y 坐标，在图片上方适当位置
                        text: "QF", // 要显示的文字
                        fontSize: 8, // 文字大小
                        fill: 'black' // 文字颜色
                      });
                      fGroup.add(lineImage);
                      fGroup.add(textB);
                      // fGroup.add(textB_1);
                      bGroup.add(fGroup);
                      layer.draw();
                      this.stage.draw();
                    };
                    image.src = imageSrc;
                     // 创建区域
                    // 限制矩形框在B路的50%高度内
                    this.halfHeightB = this.stage.height() / 2+10; // 计算每路的高度（除去配电柜高度）
                    if (rectY > this.halfHeightB) {
                      const scaleBgroup = this.halfHeightB / rectY;
                      totalScaleY *= scaleBgroup; // 累积缩放比例
                      // 调整 bGroup 和 dGroup 的位置和缩放
                      const newY = this.halfHeightB - rectY * totalScaleY;
                      // 确保 newY 不会导致元素移出可视区域
                      const minY = 0; // 最小 y 坐标
                      const finalY = Math.max(minY, newY);
                      fGroup.y(finalY); // 调整 y 坐标以防止往上跑
                      fGroup.scale({ x: 1, y: totalScaleY });
                      // 确保缩放比例不会过小
                      const minScale = 0.1; // 最小缩放比例
                      if (totalScaleY <= this.scaleAgroup) {
                        totalScaleY = this.scaleAgroup;
                        // bGroup.scale({ x: 1, y: totalScaleY });
                        fGroup.scale({ x: 1, y: totalScaleY });
                        KGroup.scale({ x: 1, y: totalScaleY });
                      }
                    }else{
                      const scaleBgroup = this.halfHeightB / rectY;
                      totalScaleY *= scaleBgroup; // 累积缩放比例
                      // 调整 bGroup 和 dGroup 的位置和缩放
                      const newY = this.halfHeightB - rectY * totalScaleY;
                      // 确保 newY 不会导致元素移出可视区域
                      const minY = 0; // 最小 y 坐标
                      const finalY = Math.max(minY, newY);
                      fGroup.y(finalY); // 调整 y 坐标以防止往上跑
                      fGroup.scale({ x: 1, y: totalScaleY });
                      // 确保缩放比例不会过小
                      const minScale = 0.1; // 最小缩放比例
                      if (totalScaleY > this.scaleAgroup) {
                        if(this.scaleAgroup==0){
                          totalScaleY = 1;
                        }else{
                          totalScaleY = this.scaleAgroup;
                        }
                        // bGroup.scale({ x: 1, y: totalScaleY });
                        fGroup.scale({ x: 1, y: totalScaleY });
                        KGroup.scale({ x: 1, y: totalScaleY });
                      }
                      
                    }
                  }
                }                
                // 将 bGroup 添加到 mainGroup 中
                mainGroup.add(bGroup);
                mainGroup.add(dGroup);
                bGroup.moveToTop();
                layer.draw();
                this.stage.draw();
              }


          layer.add(mainGroup);
          this.stage.add(layer);
          layer.draw();
          this.stage.draw();
          // 鼠标按下事件
          this.stage.on('mousedown touchstart', (e) => {
            this.isDragging = true;
            this.lastPointerPos = this.stage.getPointerPosition();
          });

          // 鼠标移动事件
          this.stage.on('mousemove touchmove', (e) => {
            if (!this.isDragging) return;
            const pos = this.stage.getPointerPosition();
            const dx = pos.x - this.lastPointerPos.x;
            const dy = pos.y - this.lastPointerPos.y;
            this.stage.position({
              x: this.stage.position().x + dx,
              y: this.stage.position().y + dy
            });
            this.lastPointerPos = pos;
            this.stage.batchDraw();
          });
          // 鼠标抬起事件
          this.stage.on('mouseup touchend', () => {
            this.isDragging = false;
          });
          this.stage.on('wheel', (evt) => {
              const oldScale = this.stage.scaleX();
              const pointer = this.stage.getPointerPosition();
              const scaleBy = 1.1; // 缩放比例，1.1 表示每次缩放增加10%
              const mousePointTo = {
                x: (pointer.x - this.stage.x()) / oldScale,
                y: (pointer.y - this.stage.y()) / oldScale,
              }; // 将鼠标指针相对于画布的位置转换为相对于缩放后的画布位置
              const newScale = evt.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy; // 根据滚轮方向决定是放大还是缩小
              this.stage.scale({ x: newScale, y: newScale }); // 应用新的缩放比例
              this.stage.position({ // 保持鼠标指针在缩放后的位置上不变
                x: pointer.x - mousePointTo.x * newScale,
                y: pointer.y - mousePointTo.y * newScale,
              });
              this.stage.batchDraw(); // 刷新舞台以显示新的缩放状态
            });
          })
        
        // }).catch(() => {
        //   // this.loading = false;
        // });


      }
    }
  }
</script>
<style lang="scss" scoped>
.top{
  width: 100%;
    height: 63px;
   display: flex;
    font-size: 14px;
    justify-content: space-between;
      .top_left{
          width: 300px;
          height: 63px;
          line-height: 63px;
          .textA{
            font-weight: 400;
            color: #7E7E7E;
            margin-right: 5px;
          }
          .textB{
            font-weight: 400;
            color: #3579F6;
            margin-left: 5px;
          }
        }
      .top_right{
          width: 200px;
          height: 63px;
          display: flex;
          font-size: 20px;
          .box_A{
            width: 54px;
            height: 32px;
            margin: 15px 10px 0 0;
            line-height: 32px;
            text-align: center;
            background: #67CD78;
            border-radius: 2px;
          }
          .box_B{
            width: 54px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            margin-top: 15px;
            background: #1B6BFF;
            border-radius: 2px;
            margin-top: 15px;
          }
    }
}
#scroll-container {
  /* 设置为可滚动 */
  overflow: auto;
  width: 100% !important;
  height: 820px !important;
  // background-color: #7E7E7E;
}
.bottom{
  width: 100% !important;
  height: 800px !important; 
  // background-color: aquamarine; 
}
</style>